<script setup lang="ts">
import {defineRule, useFieldArray, useForm} from 'vee-validate';
import { watch } from 'vue';

defineRule("required", (value:string)=>{
  if(!value||!value.length) {
    return "This field is required"
  }
  return true;
})


import type {TextBlock} from '@/types/block';

const props=defineProps<{
  block:TextBlock
}>()


// eslint-disable-next-line no-unused-vars
const emit=defineEmits<{(event:'change',block:TextBlock):void}>()

const {values,errors,defineField} = useForm({
  validationSchema:{
    content:"required"
  },
  initialValues:{
    content: props.block.props.content,
    person:{
      name:"张三",
      info:{
        hobby:['篮球',]
      }
    }
  }
})
// const {fields,push,remove}=useFieldArray('fields')
const {fields,push}=useFieldArray('person.info.hobby')

const [content,contentAttr] = defineField('content')

watch(content,(newVal)=>{
  const block=({...props.block, props:{...props.block.props, content:newVal}})
  emit('change', block)
})
// const handleChange=(content:string)=>{
//   const block=({...props.block, props:{...props.block.props, content}})
//   emit('change', block)
// }
</script>

<template>
  <!-- <input 
  v-model="content"
  v-bind="contentAttr"
  class="content" :value="props.block.props.content" @change="(ev)=>handleChange((ev.target as HTMLInputElement).value)"  />-->
   <input v-model="content" v-bind="contentAttr" class="content" /> 
  <!-- <input v-for="field in fields" :key="field.key" v-model="field.value"/> -->
   <p style="color: red;">
    {{ errors.content }}
   </p>
  <div v-for="field in fields" :key="field.key">
    {{ field.key }}
    <input v-model="field.value"/>
  </div>
  <div>
    <button @click="()=>push('')">动态添加</button>
    <button @click="()=>console.log(JSON.stringify(values))">查看数据</button>
  </div>
</template>

<style scoped>
.content{
  width:100%;
}
</style>
